<template>
  <div>
    <div>
      <div>
        <a href="/#/adduser">
          <Button class="add" type="primary" icon="plus-round">添加用户</Button>
        </a>
        <Button class="add" type="primary" ><Icon type="ios-download-outline"></Icon> 导出当前表格</Button>
        <div class="search-bar">
          <Input v-model="search" placeholder="摆设…暂无搜索功能…">
          <Button slot="append" icon="ios-search"></Button>
          </Input>
        </div>
      </div>
      <div class="table">
        <Table border :columns="columns1" :data="data1"></Table>
      </div>
    </div>
    <div class="page-bar">
      <Page :total="totalPage" :page-size="pageSize" show-total show-elevator @on-change="page"></Page>
    </div>
  </div>
</template>
<style>
.page-bar {
  margin-top: 25px;
  text-align: center;
}

.add {
  margin-top: 20px;
  margin-left: 20px;
  display: inline-block;
}

.table {
  margin-top: 30px;
}
</style>
<script>
export default {
  data() {
    return {
      search: null,
      columns1: [
        {
          title: "ID",
          key: "id",
          width: 90,
          align: "center"
        },
        {
          title: "名字",
          key: "name",
          render: (h, params) => {
            return h("div", [h("strong", params.row.name)]);
          }
        },
        {
          title: "性别",
          key: "gender"
        },
        {
          title: "权限",
          key: "permission"
        },
        {
          title: "Email",
          key: "email"
        },
        {
          title: "创建时间",
          key: "time"
        },
        {
          title: "操作",
          key: "action",
          width: 150,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.revise(params.row.id);
                    }
                  }
                },
                "修改"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.remove(params);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],
      data1: [],
      totalPage: null,
      pageSize: null,
      permissionList: [],
      userdata: {
        name: null,
        permission_id: null,
        email: null
      },
      permission_id: null
    };
  },
  methods: {
    revise(id) {
      let that = this;
      this.$axios.get("backend/user/" + id + "/edit", null, function(res1) {
        that.$axios.get("backend/permission/create", null, function(res2) {
          that.permissionList = [];
          for (let i = 0; i < res2.length; i++) {
            that.permissionList.push(res2[i]);
          }
          that.$Modal.confirm({
            title: "修改用户",
            loading: true,
            onOk: () => {
              that.userdata.permission_id = that.permission_id;
              if (that.userdata.name == null) {
                that.userdata.name = res1.name;
              }
              if (that.userdata.permission_id == null) {
                that.userdata.permission_id = res1.permission_id;
              }
              if (that.userdata.email == null) {
                that.userdata.email = res1.email;
              }
              if (that.userdata.name.length < 6) {
                that.$Message.warning("用户名太短，请保持在6~12位。");
                that.$Modal.remove();
                return false;
              }
              if (that.userdata.email.length < 8) {
                that.$Message.warning("邮箱格式不对，请重新输入。");
                that.$Modal.remove();
                return false;
              }
              console.log(that.userdata);
              setTimeout(function() {
                that.$axios.put("backend/user/" + id, that.userdata, function(
                  res
                ) {
                  if (res == 0 || res == 2) {
                    that.$Message.error("权限不足，修改用户失败！");
                  } else if (res == 3) {
                    that.$Message.warning("用户资料没有修改！");
                  } else if (res == 4) {
                    that.$Message.error("用户名已存在，请重新输入。");
                  } else {
                    that.$Message.success("修改用户成功！");
                    that.getData();
                  }
                  that.$Modal.remove();
                });
              }, 700);
            },
            onCancel: function() {},
            render: h => {
              return h("div", [
                h("div", [
                  h("br"),
                  "用户名",
                  h("Input", {
                    props: {
                      value: res1.name
                    },
                    on: {
                      input: val => {
                        that.userdata.name = val;
                      }
                    }
                  })
                ]),
                h("br"),
                h("div", [
                  "权限",
                  h(
                    "Select",
                    that.permissionList.map(function(item) {
                      // console.log(item);
                      return h("Option", {
                        props: {
                          value: item.permission
                        },
                        nativeOn: {
                          click: val => {
                            let permission = val.target.innerText;
                            for (
                              let i = 0;
                              i < that.permissionList.length;
                              i++
                            ) {
                              if (
                                permission == that.permissionList[i].permission
                              ) {
                                that.permission_id = that.permissionList[i].id;
                              }
                            }
                          }
                        }
                      });
                    })
                  )
                ]),
                h("br"),
                "Email",
                h("Input", {
                  props: {
                    value: res1.email
                  },
                  on: {
                    input: val => {
                      that.userdata.email = val;
                    }
                  }
                })
              ]);
            }
          });
        });
      });
    },
    getData(page) {
      var that = this;
      // console.log(page)
      this.$axios.get("backend/user", page || null, function(res) {
        // console.log(res);
        that.totalPage = res[2];
        that.pageSize = res[3];
        var data = res[0];
        that.data1 = [];
        for (var i = 0; i < data.length; i++) {
          let id = data[i].id;
          let name = data[i].name;
          let gender;
          if (data[i].gender == "male") {
            gender = "男";
          } else {
            gender = "女";
          }
          let permission;
          for (var j = 0; j < res[4].length; j++) {
            var permission_id = data[i].permission_id;
            if (permission_id == res[4][j].id) {
              permission = res[4][j].permission;
            }
          }
          let email = data[i].email;
          let time = data[i].create_time;
          let user = {
            id: id,
            name: name,
            gender: gender,
            permission: permission,
            email: email,
            time: time
          };
          that.data1.push(user);
        }
      });
    },
    page(page) {
      this.currentPage = {
        page: page
      };
      this.$store.commit("c_page", page);
      this.getData(this.currentPage);
    },
    remove(params) {
      let userId = params.row.id;
      let index = params.index;
      var that = this;
      this.$Modal.confirm({
        title: "确认删除",
        content: `你要删除：<br>《 ${this.data1[index].name} 》这个用户吗？`,
        onOk: function() {
          that.$axios.delete("backend/user/" + userId, null, function(res) {
            if (res == 0) {
              that.$Message.error("权限不足，删除用户失败！");
            } else {
              that.$Message.success("删除用户成功！");
              that.data1.splice(index, 1);
            }
          });
        },
        onCancel: () => {
          this.$Message.info("取消删除");
        }
      });
    }
  },
  mounted() {
    this.getData();
    this.$store.commit("bread", "用户列表");
  }
};
</script>
